<script lang="tsx">
import {
  defineComponent,
  ref,
  computed,
  type PropType,
  type ExtractPropTypes
} from 'vue'
import { ElOption, ElSelect } from 'element-plus'
import { merge } from 'lodash-es'
import {
  omitSelfProps,
  makeValue,
  IgnoreProps,
  type BaseType,
  type SimpleKeyValueObject,
  type SimpleKeyArrayObject
} from './utils'
export const oSelectSelfProps = {
  formData: {
    type: Object,
    required: true
  },
  prop: {
    type: String,
    required: true
  },
  perm: {
    type: String,
    default: 'true'
  },
  visiable: {
    type: Boolean,
    default: true
  },
  options: {
    type: Array<SimpleKeyArrayObject>
  },
  clearable: {
    type: Boolean,
    default: true
  },
  field: {
    type: String,
    default: 'label'
  },
  returnField: {
    type: String,
    default: 'value'
  },
  ...IgnoreProps
}
export const oSelectProps = {
  ...ElSelect.props,
  ...oSelectSelfProps
}
export type oSelectPropsType = ExtractPropTypes<typeof oSelectProps>
const oSelect = defineComponent({
  name: 'one-select',
  props: oSelectProps,
  components: { ElSelect },
  setup(props: oSelectPropsType, context) {
    const inProps = omitSelfProps<oSelectPropsType, typeof oSelectSelfProps>(
      props,
      oSelectSelfProps
    )
    props.options = props.options || []

    return () => (
      <ElSelect
        {...inProps}
        clearable={props.clearable}
        class={oSelect.name}
        v-model={props.formData![props.prop!]}
        v-slots={context.slots}
      >
        {props.options &&
          props.options!.map((item: SimpleKeyArrayObject) => {
            return (
              <ElOption
                key={item[props.field]}
                label={item[props.field]}
                value={item[props.returnField]}
              ></ElOption>
            )
          })}
      </ElSelect>
    )
  }
})
export default oSelect
</script>
<style lang="scss" scoped></style>
